<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="pos_r">
			<div class="alltitle">日/月用户数</div>
			<div class="pos_a cut_btn dflex">
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: memberCutBtn == '日' }"
					@click="memberDay" round>日</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: memberCutBtn == '月' }"
					@click="memberMonth" round>月</el-button>
			</div>
		</div>
		<div class="allnav" id="member"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				memberCutBtn: '日',
				memberDom: null,
				memberOption: []
			};
		},
		methods: {
			async memberDay(isLoading = true) {
				this.memberCutBtn = '日';

				if (isLoading) {
					this.memberDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-member']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月%d日","+0800") as time')
					.groupField('count(*) as cnt')
					.orderBy('time desc')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					res.datas = resData[0].result.data;
				}).catch(() => {
					if (isLoading) {
						this.memberDom.hideLoading();
					}
				})

				if (isLoading) {
					this.memberDom.hideLoading();
				}

				if (res.datas.length > 0) res.code = 200;

				if (res.code == 200) {
					this.memberOption.xAxis.data = [];
					this.memberOption.series[0].data = [];

					let today = new Date();
					let todaystr = today.format('yyyy年MM月dd日');
					for (let i = 30; i >= 0; i--) {
						today = new Date();
						today.setTime(today.getTime() - 1000 * 60 * 60 * 24 * i);
						todaystr = today.format('yyyy年MM月dd日');

						let data = res.datas.find(x => x.time == todaystr) || {};

						this.memberOption.series[0].data.push({
							value: data.cnt || 0,
							name: todaystr
						});
						this.memberOption.xAxis.data.push({
							value: today.format('dd'),
							time: todaystr
						});
					}
				}
				this.memberDom.setOption(this.memberOption);
			},
			async memberMonth(isLoading = true) {
				this.memberCutBtn = '月';

				if (isLoading) {
					this.memberDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-member']
					.collection()
					.groupBy('dateToString(add(new Date(0),create_time),"%Y年%m月","+0800") as time')
					.groupField('count(*) as cnt')
					.orderBy('time desc')
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					res.datas = resData[0].result.data;
				}).catch(() => {
					if (isLoading) {
						this.memberDom.hideLoading();
					}
				})

				if (isLoading) {
					this.memberDom.hideLoading();
				}

				if (res.datas.length > 0) res.code = 200;

				if (res.code == 200) {
					this.memberOption.xAxis.data = [];
					this.memberOption.series[0].data = [];

					let today = new Date();
					let todaystr = today.format('yyyy年MM月');
					for (let i = 11; i >= 0; i--) {
						today = new Date();
						today.setMonth(today.getMonth() - i);
						todaystr = today.format('yyyy年MM月');

						let data = res.datas.find(x => x.time == todaystr) || {};

						this.memberOption.series[0].data.push({
							value: data.cnt || 0,
							name: todaystr
						});
						this.memberOption.xAxis.data.push({
							value: today.format('MM'),
							time: todaystr
						});
					}

					this.memberDom.setOption(this.memberOption);
				}
			},
			memberCharts(callback) {
				this.memberDom = this.$echarts.init(document.getElementById('member'));

				this.memberOption = {
					grid: {
						left: '10',
						top: '30',
						right: '10',
						bottom: '10',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						label: {
							show: true
						},
						formatter: function(params) {
							let str = '';

							str += ' ' + params[0].data.name + '    ' + '\n';
							params.forEach(item => {
								if (item.seriesName === '新增数') {
									str += ' ' + item.seriesName + ' : ' + item.data.value + '  ';
								}
							});
							return str;
						}
					},
					legend: {
						top: '0%',
						data: ['新增数'],
						textStyle: {
							color: 'rgba(255,255,255,.5)',
							fontSize: '12'
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							color: '#30eee9'
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						},
						data: []
					},
					yAxis: [{
						type: 'value',
						name: '',
						axisLabel: {
							formatter: '{value}',
							textStyle: {
								color: '#2ad1d2'
							}
						},
						axisLine: {
							lineStyle: {
								color: '#27b4c2'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#11366e'
							}
						}
					}],
					series: [{
						smooth: true,
						name: '新增数',
						type: 'line',
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: false,
						lineStyle: {
							normal: {
								color: '#00d4c7',
								width: 2
							}
						},
						areaStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgba(0, 212, 199, 0.4)'
										},
										{
											offset: 0.8,
											color: 'rgba(0, 212, 199, 0.1)'
										}
									],
									false
								),
								shadowColor: 'rgba(0, 0, 0, 0.1)'
							}
						},
						itemStyle: {
							normal: {
								color: '#00d4c7',
								lineStyle: {
									color: '#00d4c7',
									width: 1
								}
							}
						},
						data: []
					}]
				};

				window.addEventListener('resize', () => {
					this.memberDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.memberCharts(() => {
				this.memberDay();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				if (this.memberCutBtn == '日') {
					this.memberDay(false);
				} else {
					this.memberMonth(false);
				}
			});
		}
	};
</script>

<style></style>
